<template>
  <el-form :inline="true" :model="form" :rules="rules" ref="formEl">
    <el-form-item label="买/卖" prop="type" v-if="items.includes('type')">
      <el-radio-group v-model="form.type">
        <el-radio label="buy">买</el-radio>
        <el-radio label="sell">卖</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="物品" prop="source" v-if="items.includes('source')">
      <el-select v-model="form.source" multiple placeholder="物品" style="width: 240px">
        <el-option
          v-for="item in source"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="在线状态" prop="onLineState" v-if="items.includes('onLineState')">
      <el-select v-model="form.onLineState" multiple placeholder="在线状态" style="width: 240px">
        <el-option
          v-for="item in onLineState"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="是否揭示" prop="subType" v-if="items.includes('subType')">
      <el-select v-model="form.subType" multiple placeholder="是否揭示" style="width: 240px">
        <el-option
          v-for="item in subType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="小于等于n白鸡" prop="lessPrice" v-if="items.includes('lessPrice')">
      <el-input-number v-model="form.lessPrice" :min="1" :max="Infinity" />
    </el-form-item>
    <el-form-item label="n个" prop="overNum" v-if="items.includes('overNum')">
      <el-input-number v-model="form.overNum" :min="1" :max="Infinity" />
    </el-form-item>
    <el-form-item label="轮询时间（s）" prop="time" v-if="items.includes('time')">
      <el-input-number v-model="form.time" :min="1" :max="30" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit" :loading="buttonLoading">{{
        isCreate ? '新增' : '查询'
      }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { get, set } from '@/storage/index';
import { OnLineState, Subtype, Type, Source, type Form } from '@/types/filter';
import { computed, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import config from '@/config';
const { statusOptions, subtypeOptions, soruceOptions } = config;

interface Props {
  isCreate?: boolean;
  items?: Partial<keyof Form>[];
  buttonLoading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  isCreate: false,
  items: () => ['type', 'lessPrice', 'onLineState', 'overNum', 'subType', 'time', 'source'],
  buttonLoading: false
});
interface Emits {
  (e: 'search', form: Form): void;
}
const emits = defineEmits<Emits>();

const formEl = ref<FormInstance>();

const source = [
  { label: soruceOptions[Source.rifle], value: Source.rifle },
  { label: soruceOptions[Source.melee], value: Source.melee },
  { label: soruceOptions[Source.pistol], value: Source.pistol }
];

const onLineState = [
  { label: statusOptions[OnLineState.ingame], value: OnLineState.ingame },
  { label: statusOptions[OnLineState.online], value: OnLineState.online },
  { label: statusOptions[OnLineState.offline], value: OnLineState.offline }
];

const subType = [
  { label: subtypeOptions[Subtype.unrevealed], value: Subtype.unrevealed },
  { label: subtypeOptions[Subtype.revealed], value: Subtype.revealed }
];

const getStorage = () => {
  get('form')
    .then(res => {
      if (res) {
        form.value = res as Form;
      }
    })
    .finally(() => {
      !props.isCreate && emits('search', form.value);
    });
};

let form = ref<Form>({
  source: [Source.rifle, Source.melee],
  type: Type.sell,
  onLineState: [OnLineState.ingame, OnLineState.online],
  subType: [Subtype.unrevealed],
  lessPrice: 25,
  overNum: 1,
  time: 5
});
!props.isCreate && getStorage();

const rules = computed(() => {
  const init = {
    source: [{ required: true, message: '请选择物品', trigger: 'change' }],
    type: [{ required: true, message: '请选择买卖状态', trigger: 'change' }],
    onLineState: [{ required: true, message: '请选择在线状态', trigger: 'change' }],
    subType: [{ required: true, message: '请选择是否揭示', trigger: 'change' }],
    lessPrice: [{ required: true, message: '请输入小于等于n白鸡的白鸡数', trigger: 'blur' }],
    overNum: [{ required: true, message: '请输入大于等于n个的个数', trigger: 'blur' }],
    time: [{ required: true, message: '请输入轮询时间', trigger: 'blur' }]
  };
  const result = {};
  Object.keys(init).forEach(key => {
    if (props.items.includes(key as keyof Form)) {
      // @ts-ignore
      result[key] = init[key];
    }
  });
  return result;
});

const submit = () => {
  if (!formEl.value) {
    return;
  }
  formEl.value.validate((valid, fields) => {
    if (!valid) {
      ElMessage.error('数据异常，请稍后重试！');
      return;
    }
    const result = {};
    if (props.isCreate) {
      Object.keys(form.value).forEach(key => {
        if (props.items.includes(key as keyof Form)) {
          // @ts-ignore
          result[key] = form.value[key];
        }
      });
      // @ts-ignore
      emits('search', result);
    } else {
      set('form', form.value);
      emits('search', form.value);
    }
  });
};
</script>

<style scoped lang="less"></style>
